<template>
  <div class="bigbox">
    <div class="topbox"> 
      <ElForm @checkshow="(val)=>isshow=val" @getlist="getlist" />
    </div>
    <div class="bodybox" :style="{ height: isshow ? 'calc(100% - 150px)' : 'calc(100% - 90px)' }">
      <div class="title">
        <div>{{formdata.orgName}} {{formdata.startDate}} 至 {{formdata.endDate}} 小时用电量报表(kWh)</div>
      </div>
      <TopTitle @command="(val)=>issize=val" @daochu="exporttab" @shuaxin="getlist(formdata)">
        <template #leftother>
          <div class="text">
            <span>尖电单价(元/kWh):{{entity.sharpElectricityUnitPrice}}</span><span>峰电单价(元/kWh):{{entity.peakElectricityUnitPrice}}</span>
            <span>平电单价(元/kWh):{{entity.flatElectricityUnitPrice}}</span><span>谷电单价(元/kWh):{{entity.valleyElectricityUnitPrice}}</span>
          </div>
        </template>
        <template #centerother>
          <span class="text">电费计算日期 起 {{formdata.startDate}} 止 {{formdata.endDate}}</span>
        </template>
      </TopTitle>
      <div class="tablebox">
        <TableColumn
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig" 
          :issize="issize" />
      </div>
    </div>
  </div>
</template>
<script>
import ElForm from '../component/el-form.vue'
import { exportexcel } from '@/utils/excel'
import {getMinuteElectricityapi} from '@/api/ElectricalDistribution/hour-power-report'
export default {
  name: 'CallPoliceElForm',
  components: {
    ElForm
  },
  data() {
    return {
      isshow: false,
      formdata:{},      
      tableData:[],
      issize:'medium',
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '70' },
        { label: '设备名称', prop: 'deviceName' , width: '200'},
        { label: '尖峰电', prop: 'buildingName',
          children:[
            {label: '电量(kWh)', prop: 'sharpElectricity',center:'right'},
            {label: '电费(元)', prop: 'sharpElectricityFee',center:'right'},
          ]
        },
        { label: '高峰电', prop: 'buildingName',
          children:[
            {label: '电量(kWh)', prop: 'peakElectricity',center:'right'},
            {label: '电费(元)', prop: 'peakElectricityFee',center:'right'},
          ]
        },
        { label: '平峰电', prop: 'buildingName',
          children:[
            {label: '电量(kWh)', prop: 'flatElectricity',center:'right'},
            {label: '电费(元)', prop: 'flatElectricityFee',center:'right'},
          ]
        },
        { label: '低谷电', prop: 'buildingName',
          children:[
            {label: '电量(kWh)', prop: 'valleyElectricity',center:'right'},
            {label: '电费(元)', prop: 'valleyElectricityFee',center:'right'},
          ]
        },
        { label: '总电量(kWh)', prop: 'totalElectricity' ,center:'right'},
        { label: '电费总计(元)', prop: 'totalElectricityPrice', center: 'right' },
      ],
      entity:{}
    }
  },
  mounted() {},
  methods: {
    async getlist(val) {
      this.formdata={...val}
      this.$refs.tabledata.loading=true
      const {data:{list,content}}=await getMinuteElectricityapi(this.formdata)
      this.tableData=list
      this.entity=JSON.parse(content)
      this.$refs.tabledata.loading=false
    },
     // 导出
    exporttab() {
      exportexcel(
        '/pio-microservice-biz/pio/ect/report/form/minute/hour/electricity/exportExcel',
        this.formdata,
        '分时电量报表'
      )
    }
  }
}
</script>
<style scoped lang="scss">
.bigbox {
  height: 100%;
  padding: 10px;
  .topbox {
    margin-bottom: 10px;
    background-color: #fff;
  }
  .bodybox {
    padding: 20px;
    background-color: #fff;
    .title{
      text-align: center;
      font-size: 20px;
      color: #000;
    }
    .text{
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
      height: 100%;
      span{
        margin-right: 15px;
      }
    }
    .tablebox{
      height: calc(100% - 80px);
    }
  }
}
</style>
